<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>音乐播放器找回密码页面</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--    <script src="js/md5.min.js"></script>-->
    <!-- 3. 导入bootstrap的js文件 -->
    <!--<script src="js/bootstrap.min.js"></script>-->
<!--    <script type="text/javascript"></script>-->
    <style>
		  #body{
			  background-image: url("images/retPassword.png");
              /*background-size:100% 100%;
              background-attachment: fixed;*/
      }
      </style>
    <script>
        $(function(){
            //处理修改请求
            $("#submit").click(function(){
                let email = $("#email").val();
                let passwordA = $("#passwordA").val();
                let passwordB = $("#passwordB").val();
                let codeD = $("#emailCode").val();
                if(email == null || email == ""){
                    alert("请输入邮箱~");
                    return;
                }
                if(codeD == "" || codeD == null){
                    alert("请输入验证码~");
                    return;
                }
                if(passwordA == ""){
                    alert("请输入重置密码~");
                    return;
                }
                if(passwordB == ""){
                    alert("请输入确认密码~");
                    return;
                }
                if(passwordA.length < 8 || passwordA.length > 16){
                    alert("密码长度不符合要求，请重新输入~");
                    return;
                }
                if(passwordB.length < 8 || passwordB.length > 16){
                    alert("确认密码不符合要求，请重新输入~");
                    return;
                }
                if(passwordA.length != passwordB.length){
                    alert("两次密码长度不一致，请重新输入~");
                    return;
                }
                //执行异步请求（AJAX）请求
                $.ajax({
                    url: "/user/updatePas",
                    data:{
                        "email":email,
                        "passwordA":passwordA,
                        "passwordB":passwordB,
                        "emailCode":codeD
                    },
                    type:"POST",
                    dataType:"json",
                    success:function(obj){
                        if(obj.status == 1){
                            alert("密码修改成功~");
                            //跳转至登录页面
                            window.location.href="login.html";
                        }else{
                            $("#message").text(obj.message);
                        }
                    }
                })
            })
        //发送验证码
        $("#sendCode").click(function (){
            let email = $("#email").val();
            if(email == "" || email == null){
                alert("邮箱为空，无法发送验证码~");
                return;
            }
            if(email.length < 8 || email.length > 24){
                alert("邮箱长度不符合要求，请核验后输入~");
                return;
            }
            //校验通过
            $.ajax({
                url: "/user/sendEmailCode",
                data:{
                    "email":email
                },
                type:"POST",
                dataType:"json",
                success:function(data){
                    if(data.status == 1){
                        alert(data.message);
                    }else{
                        $("#message").text(data.message);
                    }
                }
            })
        })
        })
    </script>
</head>
<body id="body" >
<div class="container" style="width: 450px;margin-top: 260px;background-color: rgba(255,255,255,0.6)">
    <h3 style="text-align: center;">找回密码：</h3>
    <!--        <form action="login" method="post">-->
    <div class="form-group" >
        <label for="email">邮箱：</label>
        <input type="text" name="username" class="form-control" id="email" placeholder="请输入注册时使用的邮箱(8-24位)" maxlength="24" minlength="8"/>
    </div>

    <div class="form-group">
        <label for="passwordA">重置密码：</label>
        <input type="password" name="password" class="form-control" id="passwordA" placeholder="请输入8-16位新密码" maxlength="16"/>
    </div>

    <div class="form-group">
        <label for="passwordB">确认密码：</label>
        <input type="password" name="password" class="form-control" id="passwordB" placeholder="请输入8-16位确认密码" maxlength="16"/>
    </div>

    <div class="form-group">
        <label for="emailCode">邮箱验证码：</label>
        <input type="button" value="发送验证码" id="sendCode" name="sendCode">
        <input type="text" name="emailCode" class="form-control" id="emailCode" placeholder="请输入邮箱验证码"/>
    </div>
    <a href="login.html">想起了密码？不找回了？</a><br/>
    <a href="register.html">邮箱不再使用？注册新账号</a>
    <hr/>
    <div class="form-group" style="text-align: center;"><!--class="form-group"-->
        <input style="width: 200px;height: 40px" id="submit" class="btn btn btn-primary" type="button" value="提交" >
    </div>
    <!--	  	</form>-->
    <!-- 出错显示的信息框 -->
    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" >
            <span>&times;</span>
        </button>
        <strong id="message">您尚未完成找回密码!</strong>
    </div>
</div>
</body>
</html>